import React from "react";
import BaseView from '../BaseView';
import { Provider, getTheme } from "../../../components/theme";

export default class FieldView extends React.Component {
  render() {
    let { field, isShowLock, className, fieldStyle, ...rest } = this.props;
    const type = field.config.complex ? 'complex' : 'single';
    // const visible = isShowLock && (field.config.hidden === 1 || field.config.hidden === '1');
    const clsNameStr = `wea-edc-form-item wea-edc-${type}-field wea-edc-${field.type.toLowerCase()}-view`;

    fieldStyle = fieldStyle || getTheme().field;

    return (
      <Provider value={{field: fieldStyle}}>
        <div
          data-id={field.uuid}
          className={`${clsNameStr} ${className || ''}`}
        >
          <BaseView
            type={field.type}
            value={field.value}
            uuid={field.uuid}
            data={field.config}
            {...rest}
          >
            {this.props.children}
          </BaseView>
        </div>
      </Provider>
    );
  }
}

FieldView.defaultProps = {
  isShowLock: false,
  className: '',
  onChange: () => { }
};